<template>
  <detail-dialog
    ref="detailDialog"
    :dialogTitle="dialogTitle"
    :textDetail="textDetail"
    :chart1Title="chart1Title"
    :chart2Title="chart2Title"
    :subtext="subtext"
    :chart1_title="chart1_title"
    :chart2_title="chart2_title"
    :chart1Data="chart1Data"
    :chart2Data="chart2Data"
    :chart_option="chart_option"
    :commonStyle="commonStyle"
    :tableTitle="tableTitle"
    :tableLabel="tableLabel"
    :tableData="tableData"
    :selection="selection"
    :showExport="showExport"
    :page="page"
    :formData="formData"
    :formItem="formItem"
    @onlineClick="onlineClick"
    @handleSearch="handleSearch"
    @handleExport="handleExportHost"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange"
  />
</template>

<script>
import DetailDialog from '@/components/DetailDialog'
import { netDevice } from '@/api/chartDetail.js'
import Cookies from 'js-cookie'
import { exportExcel } from '@/utils/improtFile.js'
export default {
  props: {
    commonStyle: {
      type: Object,
      default: () => {}
    },
    chart_option: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      dialogTitle: '网络设备访问状态详情',
      textDetail: {
        title: '电信一局',
        useTitle: '在线设备数',
        useData: '90',
        averageTitle: '离线设备数',
        averageData: '25'
      },
      subtext: '(%)',
      chart1_title: '分类占比',
      chart2_title: '在线与离线',
      chart1Title: '网络设备访问分类占比',
      chart2Title: '网络设备访问在线与离线占比',
      chart1Data: [1800, 4500, 5790, 2000, 2000],
      chart2Data: [17, 23, 27, 33, 9],
      showExport: true,
      tableTitle: '网络设备访问状态数据列表',
      tableLabel: [
        { label: '监控平台', param: 'btos', align: 'center', sortable: false, isShow: true },
        { label: '名称', param: 'name', align: 'center', sortable: false, isShow: true },
        { label: '区域', param: 'area', align: 'center', sortable: false, isShow: true },
        { label: '服务器类型', param: 'deviceType', align: 'center', sortable: false, isShow: true },
        { label: '设备厂商', param: 'manufacturer', align: 'center', sortable: false, isShow: true },
        { label: 'IP地址', param: 'ip', align: 'center', sortable: false, isShow: true },
        { label: '状态', param: 'accessStatus', align: 'center', sortable: false, isShow: true, slot: true }
      ],
      tableData: [],
      selection: 'index',
      page: {
        pageNo: 1,
        pageSize: 6,
        total: 0
      },
      detailVal: {},
      searchParams: {},
      formData: {
        name: '',
        area: '',
        deviceType: '',
        ip: '',
        accessStatus: ''
      },
      formItem: [
        {type: 'input', label: '名称', name: 'name'},
        {type: 'input', label: '区域', name: 'area'},
        {type: 'input', label: '服务器类型', name: 'deviceType'},
        {type: 'input', label: 'IP地址', name: 'ip'},
        {type: 'select', label: '状态', name: 'accessStatus', options: [{label: '在线', value: 1}, {label: '离线', value: 0}]}
      ]
    }
  },
  components: {
    DetailDialog
  },
  methods: {
    init (val) {
      this.detailVal = val
      // 清空数据
      this.page.pageNo = 1
      this.page.pageSize = 6
      this.searchParams = {}
      for (let item in this.formData) {
        this.formData[item] = ''
      }
      this.getData()
      this.$refs.detailDialog.init()
    },
    // 获取数据
    getData () {
      this.textDetail.title = this.detailVal.name
      netDevice({words: JSON.stringify(this.searchParams), page: this.page.pageNo, limit: this.page.pageSize, area: this.detailVal.name}).then(res => {
        if (res.code === 200) {
          this.chart1Data = []
          this.chart2Data = []
          this.textDetail.useData = 0
          // 处理分类数据
          for (let item in res.data.detail) {
            if (item !== 'btos') {
              let str = {}
              // 第一个图表数据
              if (item === 'exchangeNumber') {
                str.name = '交换机'
              } else if (item === 'exchangeRouteNumber') {
                str.name = '交换路由'
              } else if (item === 'ipDeviceNumber') {
                str.name = 'IP设备'
              } else if (item === 'routeNumber') {
                str.name = '路由器'
              }
              str.value = res.data.detail[item]
              this.chart1Data.push(str)
            }
          }
          this.textDetail.averageData = res.data.offlineNumber
          this.textDetail.useData = res.data.onlineNumber
          // 表格数据
          this.tableData = res.data.page.content
          this.page.total = parseInt(res.data.page.total)
          // 处理等级数据
          this.chart2Data = [
            {name: '在线', value: res.data.onlineNumber},
            {name: '离线', value: res.data.offlineNumber}
          ]
        }
      })
    },
    // 在线离线饼图点击
    onlineClick (val) {
      if (val.name === '在线') {
        this.formData.accessStatus = 1
        this.searchParams.accessStatus = 1
      } else {
        this.formData.accessStatus = 0
        this.searchParams.accessStatus = 0
      }
      this.getData()
    },
    // 查询
    handleSearch (data) {
      this.searchParams = {...data}
      this.getData()
    },
    // 数据列表导出
    handleExportHost (val) {
      let url = `/btos/es/net-device/export`
      let data = {
        token: Cookies.get('token'),
        area: this.detailVal.name,
        words: JSON.stringify(this.searchParams) !== '{}' ? JSON.stringify(this.searchParams) : ''
      }
      exportExcel(url, data).then(res => {})
    },
    // 当前页数量
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getData()
    },
    // 当前页码
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getData()
    }
  }
}
</script>
